<template>
  <div id="app">
<!--    <nav>-->
<!--      <router-link to="/">Home</router-link> |-->
<!--      <router-link to="/about">About</router-link>-->
<!--    </nav>-->
    <router-view/>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*{
  margin: 0;
  padding: 0;
}

.pageShow{
  display: block;
}
.pageHiddle{
  display: none;
}
.flex{
  flex: 1;
}
.imgwh{
  width: 100%;
  height: 100%;
}
.bgwh{
  background-size: 100% 100%;
}
.cursor{
  cursor: pointer;
}
input{
  display: block;
  outline: none;
  background: none;
  border: none;
}
input::-webkit-input-placeholder {
  color: #FFFFFF;
  font-size: 20px;
}
div{
  box-sizing: content-box;
}
.white{
  color: #ffffff !important;
}
.bold{
  font-weight: bold;
}
.fs-32{
  font-size: 32px !important;
}
.fs-28{
  font-size: 28px !important;
}
.fs-24{
  font-size: 24px !important;
}
.fs-22{
  font-size: 22px !important;
}
.fs-20{
  font-size: 20px;
}
.fs-18{
  font-size: 18px;
}
.fs-14{
  font-size: 14px;
}
.fs-12{
  font-size: 12px;
}
.fs-10{
  font-size: 10px;
}
.fc-d2{
  color: #D2DEDD;
}
.fc-d0{
  color: #D0B66E;
}
.text-center{
  text-align: center;
}
.vertical{
  writing-mode: vertical-lr;
  text-align: center;
}
.ellipsis {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
.ellipsis2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.ellipsis3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
}

.p10{
  padding: 10px;
}
.px10{
  padding: 0 10px;
}
.mt-5{
  margin-top: 5px;
}
.mb-5{
 margin-bottom: 5px;
}
.mb-30{
  margin-bottom: 30px;
}
.mt-10{
  margin-top: 10px;
}
.mt-15{
  margin-top: 15px;
}
.mt-20{
  margin-top: 20px;
}
.mt-30{
  margin-top: 30px;
}
.ml-10{
  margin-left: 10px;
}

.acea-row {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.row-middle {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center
}

.row-top {
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start
}

.row-bottom {
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end
}

.row-center {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center
}

.row-right {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end
}
.row-left {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start
}

.row-between {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between
}

.row-around {
  justify-content: space-around;
  -webkit-justify-content: space-around
}

.row-column-around {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: space-around;
  -webkit-justify-content: space-around
}

.row-column {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column
}

.row-column-between {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between
}

.row-center-wrapper {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center
}

.row-between-wrapper {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between
}

</style>
